<template>
	<view class="s_step">
		<view class="s_step_list" v-for="(item,index) in thistype" :key="index">
			<view class="s_step_left">
				<view class="tit_main">{{item.year}}</view>
				<view class="s_step_main">
					<view class="tit">{{item.month}}</view>
					<view class="line" v-if="index!=thistype.length-1">
						<view class="yuan"></view>
					</view>
				</view>
			</view>
			<view class="s_step_right">

				<text>{{item.bglx}}({{item.zsbh}})</text>
				<text style="margin: 0 10rpx;">{{item.zczy}}</text>
				<text>{{item.bgyy}}</text>
				<view class="s_step_right_line">
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: [
			"ctype"
		],
		data() {
			return {
				thistype: [],
				thistypeNum: 0,
				dataForm: {
					currentPage: '1',
					pageSize: '10',
					sfzh: '',
					userId: ''
				}
			}
		},
		computed: {
			isRealName() {
				return this.$store.state.isRealName
			},
			userid() {
				return this.$store.state.userId
			},
			sfzh() {
				return this.$store.state.sfzh
			}
		},
		created() {
			// 已认证数据加载
			this.dataForm.userId = this.userid
			this.dataForm.sfzh = this.sfzh
			// 分隔时间
			for (var i = 0; i < this.ctype.length; i++) {
				if (i < 3) {
					this.$set(this.ctype[i], 'year', (this.ctype[i].yxq).substring(0, 4))
					this.$set(this.ctype[i], 'month', (this.ctype[i].yxq).substring(5, 10))
					this.thistype.push(this.ctype[i])
				}
			}
		},
		methods: {
			getStep(dataForm) {

				this.$myResquest.getCert(dataForm).then(res => {})
			},
			timeCut(name) {
				let company = name.split("-")
				return company;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.s_step {
		   width: 602rpx;
		   margin: 0 auto;
		   background: #ffffff;
		   padding: 20rpx;
		       box-sizing: border-box;

		.s_step_list {
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			margin: 0 0 6rpx;

			.s_step_left {
				.tit_main {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #bebfc1;
				}

				.s_step_main {
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 80%;
					min-height: 60rpx;

					.tit {
						height: 14rpx;
						font-size: 14rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #bebfc1;
					}

					.line {
						width: 2rpx;
						height: 78%;
						background: #e5e5e5;
						position: relative;
						margin-top: 14rpx;

						.yuan {
							width: 6rpx;
							height: 6rpx;
							border-radius: 50%;
							background: #e5e5e5;
							position: absolute;
							top: -6rpx;
							left: -2rpx;
						}
					}

				}
			}

			.s_step_right {
				// background: pink;
				margin-top: 4rpx;
				font-size: 23rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #333333;
				margin-left: 34rpx;
				.s_step_right_line {
					margin-top: 26rpx;
					min-width: 413rpx;
					height: 2rpx;
					background: #e5e5e5;
				}
			}
		}
	}
</style>
